import React, { useState, useEffect } from 'react';
import {
  Chart,
  Point,
  Line,
	Axis,
  Area,
  Tooltip,
  Coordinate
} from 'bizcharts';
import DataSet from '@antv/data-set';
import { getRadar } from './service.ts'



export default ():React.FC =>  {

  const [data, setData] = useState(undefined)

  useEffect(async() => {
    const res = await getRadar();

    setData(res.data)
  }, [])
  
  const { DataView } = DataSet;
  const dv = new DataView().source(data || []);
  dv.transform({
    type: 'fold',
    fields: ['a'], // 展开字段集
    key: 'name', // key字段
    value: 'score', // value字段
  });


  const scale = {
    type: {
      formatter: v => {
        return {
          condimentsScore: '调味料',
          proteinfatScore: '蛋白质与脂肪', 
          fruitvegetablesScore: '蔬菜与水果',
          carbohydrateScore: '碳水化合物',

        }[v]
      }
    }
  }

  return (
    <Chart
      height={300}
      data={dv.rows}
      scale={{
        score: {
          min: 0,
          max: 80,
        },
        item: {
          formatter: v => {
            return {
              condimentsScore: '调味料',
              proteinfatScore: '蛋白质与脂肪', 
              fruitvegetablesScore: '蔬菜与水果',
              carbohydrateScore: '碳水化合物',
              alcoholScore: '酒',
            }[v]
          }
        }
      }}
      autoFit
      interactions={['legend-highlight']}
    >
      <Coordinate type="polar" radius={0.8} />
      <Tooltip shared />
      <Point
        position="item*score"
        color="name"
        shape="circle"
      />
      <Line
        position="item*score"
        color="name"
        size={2}
      />
      <Area
        position="item*score"
        color="name"
      />
      {
        // 棱角和圆形，默认圆形
      }
      <Axis name="score" grid={{ line: { type: 'line' } }} />
      {
        // 不需要轴的最外圈
      }
      <Axis name="item" line={false} />
    </Chart> 
  )
}
